<script setup>
import {Search} from "@element-plus/icons-vue";
import {onMounted, ref, reactive} from "vue";
import {debounce} from "@/utils";

const $emit = defineEmits(["searchHotel"]);
const msg = ref("hello vue!");

const searchInfo = reactive({
  destination: "",
  time: "",
  nums: "",
  hotel: ""
});

onMounted(() => {
});

// 搜索按钮添加防抖函数，防止用户恶意点击
const handleClick = debounce(() => {
  $emit("searchHotel", searchInfo);
}, 1000);

</script>

<template>
  <div class="searchlist">
    <div class="searchlist-item" style="width: 1150px">
      <div class="search-box">
        <label for="keyword">关健词（选填）</label>
        <input v-model="searchInfo.hotel" type="text" id="keyword" placeholder="酒店名称">
      </div>
    </div>
    <div class="searchlist-item">
      <el-button type="primary" :icon="Search" @click="handleClick"></el-button>
    </div>
  </div>

</template>

<style scoped>

</style>
